<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/admin/inc/tag.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML><HEAD><TITLE>装机</TITLE>
<META content="text/html; charset=UTF-8" http-equiv=Content-Type>
<META name=keywords content="">
<META name=description content="">
<LINK rel=stylesheet type=text/css href="/pc/zj/css/Diy_index.css">
<LINK rel=stylesheet type=text/css href="/pc/zj/css/proFilter.css">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<title>装机</title>
<script type="text/javascript">
	$(document).ready(function() {
		// 购买按钮
		$("#buy_btn").click(function () {
			if(checkForm()) {
				$("#buy_form").attr("action", "/pc/product/saveProductConfig.do?type=1");
				$("#buy_form").submit();
			}
		});
	});
	
	// 获取品牌列表
	function getProductBrand(typeId, typeName) {
		typeName = unescape(typeName);
		$("#type_name").html("<H3>请选用"+typeName+"</H3>");
		if(typeId > -999) {
			base.req("/pc/product/getProductBrand.do?typeId=" + typeId, "", function(result) {
				var arr = base.json(result);
				var html = "<DT>推荐品牌：</DT><DD><A class=selBrand href=\"#\" onclick=\"getProductList('"+typeId+"','"+typeName+"','');brandGetSelClass(this);return false;\">全部</A>";
				for(var i=0; i<arr.length; i++) {
					var brandName = arr[i].product_brand_name;
					html+="<a href=\"#\" onclick=\"getProductList('"+typeId+"','"+typeName+"','"+escape(brandName)+"');brandGetSelClass(this);return false;\">"+brandName+"</a>";
				}
				html+="</DD>";
				$("#type_list").css("display","none");
				$("#type_list").html("");
				$("#brand_list").html(html);
				$("#choose_result").html("");
				eval("getProductList('"+typeId+"','"+typeName+"','');");
			});
		}else {// 点其他的时候先获取类别列表
			base.req("/pc/product/getProductTypeList.do?","", function(data1) {
				var typeDetail="<DT>选择配置：</DT><DD>";
				var jsonArray1 = base.json(data1);
				for(var i=0; i<jsonArray1.length; i++) {
					typeDetail+="<a href=\"#\" onclick=\"getProductBrand1("+jsonArray1[i].config_id+",'"+jsonArray1[i].config_name+"',"+typeId+",'"+typeName+"');typeGetSelClass(this);return false;\">"+jsonArray1[i].config_name+"</a>";
				}
				typeDetail+="</DD>";
				$("#type_list").css("display","");
				$("#type_list").html(typeDetail);
				$("#brand_list").html("<DT>推荐品牌：</DT><DD></DD>");
				$("#choose_result").html("");
			});
		}
	}

	//获取sel样式
	function brandGetSelClass(a){
		$(".selBrand").removeClass();
		$(a).addClass("selBrand");
	}
	function typeGetSelClass(a){
		$(".selType").removeClass();
		$(a).addClass("selType");
	}

	// 其他产品获取品牌列表
	function getProductBrand1(configId,configName,typeId,typeName) {
		typeName = unescape(typeName);
		base.req("/pc/product/getProductBrand.do?typeId=" + typeId, "", function(result) {
			var arr = base.json(result);
			var html = "<DT>推荐品牌：</DT><DD><A class=selBrand href=\"#\" onclick=\"getProductList1('"+configId+"','"+escape(configName)+"','',"+typeId+");brandGetSelClass(this);return false;\">全部</A>";
			for(var i=0; i<arr.length; i++) {
				var brandName = arr[i].product_brand_name;
				html+="<a href=\"#\" onclick=\"getProductList1('"+configId+"','"+escape(configName)+"','"+escape(brandName)+"',"+typeId+");brandGetSelClass(this);return false;\">"+brandName+"</a>";
			}
			html+="</DD>";
			$("#brand_list").html(html);
			$("#choose_result").html("");
			eval("getProductList1('"+configId+"','"+escape(configName)+"','',"+typeId+");");
		});
	}
	
	// 标准配件获取产品列表
	function  getProductList(typeId, typeName, brandName) {
		typeName = unescape(typeName);
		brandName = unescape(brandName);
		if(typeId != null) {
			if(typeId > -999) {
				$("#type_list").css("display", "none");
				$("#type_list").html("");
				base.req("/pc/product/getProductList.do?typeId=" + typeId + "&brandName=" + brandName, "", function(data) {
					var jsonArray = base.json(data);
					var productDetail="<DIV class=result_hd><STRONG>已找到的"+typeName+"</STRONG>（"+jsonArray.length+"个） </DIV>"+
							"<DIV class=result_title>产品型号/价格</DIV>"+
							"<UL class=result_list>"; 
					for(var i=0; i<jsonArray.length; i++) {
						var json = jsonArray[i];
						var productName = escape(json.product_name);
						productDetail+="<LI><EM class=pic><img src=\""+json.product_pic_url+"\" width=\"60\" height=\"45\"/></EM><H4>"+json.product_name+
								"</H4><UL class=\"param clearfix\"><LI>参考价格：<SPAN class=price>&yen;&nbsp;<B>"+json.product_price+
								"</B></SPAN></LI><LI>"+json.product_parameter+"</LI></UL><SPAN class=selbtn onclick=\"setProduct("+json.product_id+
								",'"+productName+"',"+json.product_price+","+json.config_id+");\">选用</SPAN></LI>";
					}
					productDetail+="</UL>";
					$("#choose_result").html(productDetail);
				});
			}
		}
	}
	
	// 其他获取产品列表
	function  getProductList1(typeId,typeName,brandName,configId) {
		brandName = unescape(brandName);
		typeName=unescape(typeName);
		base.req("/pc/product/getProductList.do?typeId="+typeId+"&brandName="+brandName, "", function(data) {
			var jsonArray = base.json(data);
			var productDetail="<DIV class=result_hd><STRONG>已找到的"+typeName+"</STRONG>（"+jsonArray.length+"个） </DIV>"+
					"<DIV class=result_title>产品型号/价格</DIV>"+
					"<UL class=result_list>";
			for(var i=0; i<jsonArray.length; i++) {
				var json = jsonArray[i];
				var productName = escape(json.product_name);
				productDetail+="<LI><EM class=pic><img src=\""+json.product_pic_url+"\" width=\"60\" height=\"45\"/></EM><H4>"+json.product_name+
				"</H4><UL class=\"param clearfix\"><LI>参考价格：<SPAN class=price>&yen;&nbsp;<B>"+json.product_price+
				"</B></SPAN></LI><LI>"+json.product_parameter+"</LI></UL><SPAN class=selbtn onclick=\"setProduct("+json.product_id+
				",'"+productName+"',"+json.product_price+","+configId+");\">选用</SPAN></LI>";
			}
			productDetail+="</UL>";
			$("#choose_result").html(productDetail);
		});
	}
	
	function setProduct(id, name, price, type) {
		$("#id_" + type).val(id);
		$("#name_" + type).html(unescape(name));
		$("#count_" + type).html("1");
		$("#price_" + type).html("<input type='text' name='price' value='" + price 
					+ "' size='5' readonly='readonly' style='background:transparent;border:none;'/>");
		$("#oper_" + type).html("<a href='javascript:void(0)' onclick='cancelProduct(" + type + ")'>取消</a>");
		calTotalPrice();
	}
	
	function cancelProduct(type) {
		$("#id_" + type).val("");
		$("#name_" + type).html("");
		$("#count_" + type).html("");
		$("#price_" + type).html("");
		$("#oper_" + type).html("");
		calTotalPrice();
	}
	
	// 计算总的价钱
	function calTotalPrice() {
		var object = $("input[name=price]");
		var totalPrice = 0;
		for(var i=0; i<object.length; i++) {
			var price = object[i].value;
			if(price != "") {
				totalPrice = totalPrice + parseFloat(price);
			}
		}
		$("#allPriceTxt").html(totalPrice);
		
	}
	
	var checkArray = new Array();
	function setCheckArray(id) {
		checkArray[checkArray.length] = id;
	}
	
	// 检查表单数据
	function checkForm() {
		if($("#scheme_customer_name").val() == "") {
			alert("请输入姓名！");
			return false;
		}
		if($("#scheme_customer_mobile").val() == "") {
			alert("请输入手机！");
			return false;
		}
		if($("#scheme_customer_qq").val() == "") {
			alert("请输入QQ！");
			return false;
		}
		
		for(var i=0; i<checkArray.length; i++) {
			var id = checkArray[i];
			var value = $("#" + id).val();
			if(value == null || value == "") {
				alert("*号为必选配置，请您选择完整！");
				return false;
			}
		}
		return true;
	}

	//显示已保存方案
	function  displaySavedScheme(){
		var cname=unescape($("#scheme_customer_name").val());
		if(cname!=null&&cname!=""){
			base.req("/pc/zj/getSavedScheme.do?cname="+cname,"",function(data){
				var jsonArray=base.json(data);
				var savedSchemeUl="<DT>已保存方案</DT>"+
						"<DD class=rank_hd>方案编号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配置名称 <SPAN><%--价格--%></SPAN></DD>"+
						"<DD class=rank_box sizcache=\"0\" sizset=\"68\">"+
						"<UL class=rank_list sizcache=\"0\" sizset=\"68\">";
				for(var i=0;i<jsonArray.length;i++){
					var json=jsonArray[i];
					savedSchemeUl+="<LI><EM class=n1></EM>"+
							" <A href=\"/pc/zj/scheme.jsp?id="+json.scheme_id+"\" target=_blank style=\"text-decoration:none;\">"+json.scheme_no+"&nbsp;&nbsp;&nbsp;"+json.scheme_name+"</A> "+
							"<SPAN class=price><%--￥"+json.price+"--%></SPAN> </LI>";
				}
				savedSchemeUl+="</UL>"+
						"</DD>";
				$("#saved_scheme_ul").html(savedSchemeUl);
			});
		}
	}
</script>
<META name=GENERATOR content="MSHTML 8.00.7601.17940"></HEAD>
<BODY
	<c:if test="${param.isDisplaySavedScheme=='1'}">
		onload='$("#display_saved_scheme_btn").click();';
	</c:if>
>
<admin:productTypeList name="rows" />
<DIV class=wrapper style="margin:0 auto;">
<DIV class=pc_parts_select>
<UL id=topSubSel class="pc_parts_option clearfix">
	<c:forEach items="${rows}" var="row">
		<li onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));"><span>${row.config_name}</span></li>
	</c:forEach>
</UL></DIV>
<form id="buy_form" action="/pc/product/saveProductConfig.do" method="post">
	<DIV id=diy_content class=diy_box>
		<DIV class=your_card>
			<H3 class=your_card_hd>装机配置单</H3>
			<DIV class=card_head>
				<TABLE>
					<TBODY>
						<TR>
							<TH class=type>配置</TH>
							<TH class=name>品牌型号</TH>
							<TH class=num>数量</TH>
							<TH class=price>价格</TH>
							<TH>操作</TH>
						</TR>
					</TBODY>
				</TABLE>
			</DIV>
			<UL id=leftSelBox class=card_detail>
				<c:forEach items="${rows}" var="row">
					<li class="leftSubSel">
						<span class="item">
							${row.config_name} <c:if test="${row.config_is_required == '1'}">
								<em>*</em>
								<script type="text/javascript">
									setCheckArray("id_${row.config_id}");
								</script>
							</c:if>
						</span>
						<TABLE>
							<TBODY>
								<TR>
									<input type="hidden" name="config_id" value="${row.config_id}" />
									<input type="hidden" name="product_id" id="id_${row.config_id}" />
									<input type="hidden" name="config_name" value="${row.config_name}" />
									<TD onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));" class=name id="name_${row.config_id}" style="text-align: center;"></TD>
									<TD onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));" class=num id="count_${row.config_id}" style="text-align: center;"></TD>
									<TD onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));" class=price id="price_${row.config_id}" style="text-align: center;"></TD>
									<TD id="oper_${row.config_id}" style="text-align: center;"></TD>
								</TR>
							</TBODY>
						</TABLE>
					<I></I></li>
				</c:forEach>
				<li class="leftSubSel">
					<span class="item">其他1</span>
					<TABLE>
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-999" />
								<input type="hidden" name="product_id" id="id_-999" />
								<input type="hidden" name="config_name" value="其他1" />
								<TD onclick="getProductBrand(-999, '其他1');" class=name id="name_-999" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-999, '其他1');" class=num id="count_-999" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-999, '其他1');" class=price id="price_-999" style="text-align: center;"></TD>
								<TD id="oper_-999" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
				<li class="leftSubSel">
					<span class="item">其他2</span>
					<TABLE>
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-1000" />
								<input type="hidden" name="product_id" id="id_-1000" />
								<input type="hidden" name="config_name" value="其他2" />
								<TD onclick="getProductBrand(-1000, '其他2');" class=name id="name_-1000" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1000, '其他2');" class=num id="count_-1000" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1000, '其他2');" class=price id="price_-1000" style="text-align: center;"></TD>
								<TD id="oper_-1000" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
				<li class="leftSubSel">
					<span class="item">其他3</span>
					<TABLE>
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-1001" />
								<input type="hidden" name="product_id" id="id_-1001" />
								<input type="hidden" name="config_name" value="其他3" />
								<TD onclick="getProductBrand(-1001, '其他3');" class=name id="name_-1001" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1001, '其他3');" class=num id="count_-1001" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1001, '其他3');" class=price id="price_-1001" style="text-align: center;"></TD>
								<TD id="oper_-1001" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
				<li class="leftSubSel">
					<span class="item">其他4</span>
					<TABLE>
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-1002" />
								<input type="hidden" name="product_id" id="id_-1002" />
								<input type="hidden" name="config_name" value="其他4" />
								<TD onclick="getProductBrand(-1002, '其他4');" class=name id="name_-1002" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1002, '其他4');" class=num id="count_-1002" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1002, '其他4');" class=price id="price_-1002" style="text-align: center;"></TD>
								<TD id="oper_-1002" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
			</UL>
			<DIV class=price_total><SPAN class=tips><EM>*</EM> 号为必选项</SPAN> <STRONG>合计：<SPAN class=price>&yen; <B id=allPriceTxt>0</B></SPAN></STRONG></DIV>
			<pc:schemeDetailList name="schemeDetails" schemeId="${param.id}"/>
			<c:forEach items="${schemeDetails}" var="schemeDetail">
				<script type="text/javascript">
					setProduct(${schemeDetail.product_id},'${schemeDetail.product_name}',${schemeDetail.product_price},${schemeDetail.config_id});
				</script>
			</c:forEach>
			<pc:scheme name="scheme" schemeId="${param.id}"/>
			<UL id=formPostArea class=post_the_card>
				<LI>
					<DIV class=usr_login>姓名：<INPUT id="scheme_customer_name" type=text name="scheme_customer_name" value="${scheme.scheme_customer_name}"/> <input type="button" id="display_saved_scheme_btn" value="显示已保存方案" onclick="javascript:displaySavedScheme();"/></DIV>
				</LI>
				<LI>
					<DIV class=usr_login>
						手机：<INPUT id="scheme_customer_mobile" type=text name="scheme_customer_mobile" value="${scheme.scheme_customer_mobile}"/> QQ：<INPUT id="scheme_customer_qq" type=text name="scheme_customer_qq" value="${scheme.scheme_customer_qq}"/>
					</DIV>
				</LI>
				<LI>
					<DIV class=clearfix><input type="submit" value="保存方案"/> <input type="button" id="buy_btn" value="购买"/> </DIV>
				</LI>
			</UL>
		</DIV>
		<DIV class=choose_area>
			<DIV id="type_name" class=choose_form_hd><H3>请选用</H3></DIV>
			<DIV class=choose_form>
				<DL id="type_list" class=brand style="display:none;"></DL>
				<DL id="brand_list" class=brand><DT>推荐品牌：</DT><DD>请选择配置</DD></DL>
			</DIV>
			<DIV id=choose_result class=choose_result>
				<DIV class=result_hd>
					<%--
					<STRONG>已找到的CPU</STRONG>（284个） 
					<SPAN class=sort_rule>结果排序 
						<SELECT id=queryType>
							<OPTION selected value=1>最热门</OPTION>
							<OPTION value=3>最便宜</OPTION>
							<OPTION value=4>最贵</OPTION>
						</SELECT>
					</SPAN>
					--%> 
				</DIV>
				<DIV class=result_title>产品型号/价格 
					<%--
					<EM id=swith_city class=swith_city title=选择省市>[北京▼]</EM> 
					<DIV style="DISPLAY: none" id=city_list class=city_list></DIV>
					--%>
				</DIV>
				<UL class=result_list>
					<LI>
						<EM class=pic></EM>
						<H4>请选择品牌</H4>
						<UL class="param clearfix">
							<LI></LI>
							<LI></LI>
							<LI></LI>
							<LI></LI>
							<LI></LI>
							<LI>
								<A href="#" onclick="javascript:return false;" target=_blank></A> 
								<EM id=comp_316991 class=proComp></EM> 
							</LI>
						</UL>
					</LI>
					<%--
					<LI>
						<EM class=pic title="AMD A10-5800K">
							<A href="http://detail.zol.com.cn/cpu/index316991.shtml" target=_blank>
								<IMG src="【模拟攒机－模拟装机】在线攒电脑CPU－ZOL中关村在线_files/cesYbcE5pDw.jpg" width=60 height=45>
							</A> 
						</EM>
						<H4><A title="AMD A10-5800K" href="http://detail.zol.com.cn/cpu/index316991.shtml" target=_blank>AMD  A10-5800K</A></H4>
						<UL class="param clearfix">
							<LI>参考价格：<SPAN class=price>&yen;&nbsp;<B>859</B></SPAN></LI>
							<LI>适用类型：台式机</LI>
							<LI>CPU系列：APU A10</LI>
							<LI>CPU主频：3.8GHz</LI>
							<LI>动态超频最高频率：4.2GHz</LI>
							<LI>
								<A href="http://detail.zol.com.cn/317/316991/param.shtml" target=_blank>更多参数&gt;&gt;</A> 
								<EM id=comp_316991 class=proComp rel="316991,AMD A10-5800K,http://detail.zol.com.cn/cpu/index316991.shtml,http://2a.zol-img.com.cn/product_small/4_60x45/978/cesYbcE5pDw.jpg,28">对比</EM> 
							</LI>
						</UL>
						<SPAN id=316991 class=selbtn rel="316991,859,AMD A10-5800K,55,0" name="xybtn">选用</SPAN> 
					</LI>
					--%>
				</UL>
				<%--
				<DIV class=pagebar><SPAN class=sel><SPAN>1</SPAN></SPAN><A 
				href="http://zj.zol.com.cn/proFilter/sub28_m0_gnoPrice__k_1_1_2.html" 
				target=_self><SPAN>2</SPAN></A><A 
				href="http://zj.zol.com.cn/proFilter/sub28_m0_gnoPrice__k_1_1_3.html" 
				target=_self><SPAN>3</SPAN></A><A 
				href="http://zj.zol.com.cn/proFilter/sub28_m0_gnoPrice__k_1_1_4.html" 
				target=_self><SPAN>4</SPAN></A><A 
				href="http://zj.zol.com.cn/proFilter/sub28_m0_gnoPrice__k_1_1_5.html" 
				target=_self><SPAN>5</SPAN></A><SPAN><SPAN class=bgno>...</SPAN></SPAN><A 
				href="http://zj.zol.com.cn/proFilter/sub28_m0_gnoPrice__k_1_1_29.html" 
				target=_self><SPAN>29</SPAN></A><A 
				href="http://zj.zol.com.cn/proFilter/sub28_m0_gnoPrice__k_1_1_2.html" 
				target=_self><SPAN class=next>下一页&gt;</SPAN></A></DIV>
				--%>
			</DIV>
		</DIV>
		<DIV class=diy_box_bottom></DIV>
	</DIV>
</form>
<DIV style="padding:20px 0;">
	<pc:schemeList name="recommendSchemes" isRecommend="1" status="1"/>
	<DIV class="plan_side" style="WIDTH: 400px; PADDING-LEFT: 13px; FLOAT: left">
		<DL id="saved_scheme_ul" sizcache="0" sizset="68">
		</DL>
	</DIV>
	<DIV class=plan_side>
		<DL sizcache="0" sizset="68">
			<DT>推荐方案</DT>
			<DD class=rank_hd>配置名称 <SPAN><%--价格--%></SPAN></DD> 
			<DD class=rank_box sizcache="0" sizset="68">
				<UL class=rank_list sizcache="0" sizset="68">
					<c:forEach items="${recommendSchemes}" var="recommendScheme">
						<LI><EM class=n1></EM> <A href="/pc/zj/scheme.jsp?id=${recommendScheme.scheme_id}" target=_blank style="text-decoration:none;">${recommendScheme.scheme_name}</A> <SPAN class=price><%--￥${recommendScheme.price}--%></SPAN> </LI>
					</c:forEach>
				</UL>
			</DD>
		</DL>
	</DIV>
	<DIV style="clear:both;"></DIV>
</DIV>
</BODY></HTML>
